
<template>
    <div>
        <div class="title"> §项目配置</div>
        <br>
        <div class="search">
            项目搜索：<input type="text" v-model="value" placeholder="请输入名称/关键词">
            <button @click="returnAll">返回</button>
            <button @click="searchProjectInfo">搜索</button>
        </div>
        <div class="boderPrice">
            价格区间：<input type="number" v-model="minPrice" :min="0" > ~
            <input type="number" v-model="maxPrice" :min="0">
            <button @click="returnAll">返回</button>
            <button @click="borderPriceSearch" style="margin-left:-100px">搜索</button>        
        </div>
        <br>
        <div>
            <button @click="bulkDetetion" class="bulk-detetion">批量删除</button>
            <button  @click="addInfo" class="add-info">+ 添加</button>
        </div>
        <!-- 数据渲染 -->
        <el-table
        :data="tableData"
        border
        :row-style="{height: '0'}"
        style="width: 100%;">
            <el-table-column
                class="table-column"
                fixed
                prop="projectId"
                label="ID"
                width="85">
            </el-table-column>
            <el-table-column
                prop="projectName"
                label="项目名称"
                width="130">
            </el-table-column>
            <el-table-column
            prop="cyDepartment.departmentName"
            label="所属科室"
            width="120">
            </el-table-column>
            <el-table-column
                prop="projectPrice"
                label="价格(元)"
                width="80">
            </el-table-column>
            <el-table-column
                prop="detailsUp"
                label="包含细项"
                width="100">
                <template slot-scope="scope">
                    <button class="lookIncludeBtn" @click="lookInclude(scope.row)">查看细项</button>
                    <el-dialog title="项目明细" 
                    append-to-body
                    :visible.sync="dialogTableVisible"
                    >
                        <el-table :data="gridData">
                            <el-table-column property="detailsName" label="细项名字" width="150"></el-table-column>
                            <el-table-column property="detailsUnit" label="单位" width="100"></el-table-column>
                            <el-table-column property="detailsIsStatus" label="状态"></el-table-column>
                            <el-table-column property="detailsCreateTime" label="创建时间"></el-table-column>
                        </el-table>
                    </el-dialog>
                </template>
            </el-table-column>
            <el-table-column
                prop="projectIsStatus"
                label="是否启用"
                width="80">
            <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.projectIsStatus"
                    :active-value="1"
                    :inactive-value="2"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="changeStatus(scope.row)">
                </el-switch>
            </template>
            </el-table-column>
            
            <el-table-column
            prop="projectUpdateTime"
            label="更新时间"
            width="160">
            </el-table-column>
            <el-table-column
            prop="projectCreateTime"
            label="创造时间"
            width="160">
            </el-table-column>
            
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
                <template slot-scope="scope">
                    <el-button @click="alterClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="open(scope.row)" style="color:red" type="text" size="small">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 修改项目 -->
        <el-dialog 
            title="修改项目" 
            :show-close="false"
            :visible.sync="dialogVisible"
            width="500px">
            <el-form ref="form" :model="nowProject" label-width="80px">
                <el-form-item label="项目id:" class="custom-item">
                    <div style="float:left">{{nowProject.projectId}}</div>
                    
                </el-form-item>
                <el-form-item label="项目名称" class="custom-item">
                    <el-input v-model="nowProject.projectName"></el-input>
                </el-form-item>
                <el-form-item label="价格" class="custom-item">
                    <el-input v-model="nowProject.projectPrice"></el-input>
                </el-form-item>
                <el-form-item label="细项名" class="custom-item">
                    <el-input v-model="nowProject.detailsName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="sureCommit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination
            background
            @current-change="handleCurrentChange"  
            :current-page="page.currentPage" 
            :page-size="page.pageSize"
            layout="prev, pager, next"
            :total="page.total"
            >
        </el-pagination>
        <!-- 批量删除 -->
        <el-dialog 
            title="批量删除" 
            :show-close="false"
            :visible.sync="deteleVisible"
            width="500px"
            >
            <template >
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checked">
                    <el-checkbox class="el-checkbox-width" v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
                </el-checkbox-group>
                <el-button class="deleteBtn" @click="commitBelete">确定</el-button>
                <el-button class="deleteBtn" @click="cancelCommit">取消</el-button>
            </template>
        </el-dialog>
        <!-- 添加 -->
        <el-dialog title="添加项目" width="40%" :visible.sync="dialogFormVisible">
            <el-form status-icon :rules="rules" ref="form" :model="form">
                <el-form-item label="项目名称" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属科室id" prop="fatherDepartId" :label-width="formLabelWidth">
                    <el-input v-model="form.fatherDepartId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="项目价格(元)" prop="price" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所包含细项(元)" prop="details">
                    <el-select v-model="value1" multiple placeholder="请选择" style="width: 300px;">
                        <el-option
                            v-for="item in optionsName"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="是否启用" :label-width="formLabelWidth">
                    <el-radio v-model="status" label="1">是</el-radio>
                    <el-radio v-model="status" label="2">否</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">重 置</el-button>
                <el-button type="primary" @click="addCommit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

const options = []
export default {
    data(){
        return{
            tableData:[],
            nowProject:{
                projectId:0,
                projectName:"",
                projectPrice:"",
                detailsName:"",
            },
            page:{
                currentPage: 1,  
                pageSize:5,
                total:0
            },
            value: "",
            deteleVisible:false,
            isIndeterminate: true,
            checkAll: false,
            options: options,//可选择的项
            checked: [],//已经选择的
            dialogFormVisible: false,
            form: {
                name: '',
                fatherDepartId: '',
                price: '',
            },
            status: '1',
            formLabelWidth: '120px',
            dialogTableVisible: false,
            gridData:[],
            dialogVisible:false,

            // 价格区间
            minPrice:0,
            maxPrice:10000,
            isSearch : 0,
            rules:{
                name:[
                    { required: true, message: '请输入项目名称',  trigger: 'blur' }
                ],
                fatherDepartId:[
                    { required: true, message: '请输入科室id',  trigger: 'blur' }
                ],
                price:[
                    { required: true, message: '请输入套餐价格',  trigger: 'blur' }
                ],
                details:[
                    { required: true, message: '请输入所包含的细项',  trigger: 'blur' }
                ]
            },
            optionsName:[],
            value1:[],
        }
    },
    created(){
            this.getAllProject();
            this.getAllName();
            this.getAllDtailsName();
        },
    
    methods:{
        getAllProject(){
            this.$axios.post(
                '/project/getAllProject',
                {
                    pageCurr:this.page.currentPage,  
                    pageSize:this.page.pageSize,
                }
            ).then(res =>{
                if(res != undefined){
                    if(res.code == 1){
                        console.log("项目列表",res)
                        this.tableData = res.data.list
                        this.page.total = res.data.totalSize
                        this.getAllName();
                    }else{
                        alert("服务器出错")
                    }
                }
                
                
            })
        },
        getAllDtailsName(){
            this.$axios.get(
                "/details/getAllDetailsName"
            ).then(res=>{
                for(var i = 1;i<=res.data.length;i++){
                    var option = {};
                    option["value"]=res.data[i-1]
                    option["label"]=res.data[i-1]
                    this.optionsName.push(option)
                }
            })
        },
        changeStatus(row){
            console.log("row",row)
            this.$axios.get(
                '/project/changeStatus',
                {
                    params:{
                        proStatus:row.projectIsStatus,
                        projectId:row.projectId
                    }
                }
            ).then(res=>{
                console.log(res)
            })
            
        },
        handleCurrentChange(newPage) {  
            // console.log(`当前页码变更为：${newPage}`);  
        //    在这里可以根据新的页码进行数据的加载或其他操作  
            this.page.currentPage = newPage; // 更新当前页码，如果需要进行页面数据更新的话  

        // 例如，你可能需要发送一个请求来获取新页码对应的数据 
            if(this.isSearch == 0){
                this.getAllProject();
            }else if(this.isSearch == 1){
                this.searchProjectInfo();
            }else if(this.isSearch == 2){
                this.borderPriceSearch();
            }
                
        },
        returnAll(){
            this.value = '',
            this.minPrice=0,
            this.maxPrice=10000,
            this.isSearch = 0
            this.getAllProject();
        },
        searchProjectInfo(){
            this.isSearch = 1
            this.$axios.get(
                '/project/searchProjectInfo',
                {
                    params:{
                        value:this.value,
                        pageCurr:this.page.currentPage,  
                        pageSize:this.page.pageSize,
                    }
                }
            ).then(res =>{
                if(res != undefined){
                    console.log("项目搜索",res)
                    this.tableData = res.data.list
                    this.page.total = res.data.totalSize
                }
                
            })
        },
        bulkDetetion(){
            this.deteleVisible = true
        },
        handleCheckAllChange(val) {
            this.checked = val ? options : [];
            this.isIndeterminate = false;
        },
        getAllName(){
            this.$axios.post(
                '/project/getAllName',
            ).then(res =>{
                if(res != undefined){
                   // cityOptions = res.data
                    console.log("项目名称",res)
                    if(options.length!=0){
                        options.length = 0;    
                    }
                    for(const item of res.data){
                        options.push(item)
                } 
                }
                
            })
        },
        commitBelete(){
            let params = "";
            for(var i = 0;i <this.checked.length;i++){
                if(i!=this.checked.length-1){
                    params = params + this.checked[i] + "，";
                }else{
                    params = params + this.checked[i]
                }
            }
            this.$axios.get(
                '/project/commitDelete',{
                    params:{
                        checked:params
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    if(res.code == 1){
                        this.deteleVisible = false;
                        this.$message({
                            message: '批量删除成功！',
                            type: 'success'
                        });
                        this.getAllProject();
                        this.getAllName();
                    }else if(res.code == -1){
                        this.$message.error('套餐包含该项目，无法删除');
                    }else{
                        this.$message.error('删除失败！');
                    }
                }
                
            })
        },
        cancelCommit(){
            this.deteleVisible = false;
            this.dialogFormVisible = false;
        },
        addInfo(){
            this.dialogFormVisible=true;
        },
        addCommit(){
            // 查询所属科室的id是否存在
            this.$axios.get(
                '/details/fatherDepartIdIsExist',
                {
                    params:{
                        fatherDepartId:this.form.fatherDepartId
                    }
                }
            ).then(res =>{
                if(res != undefined){
                    if(res.code == 1){
                        this.dialogFormVisible = false
                        this.addProjectCommit();
                    }else if(res.code == 0){
                        this.$message('当前的科室id不存在');
                    }else if(res.code == -1){
                        this.$message.error('科室id填写格式错误');
                    }
                }
                
            })
        },
        addProjectCommit(){
            var detailsName = "";
            for(var i = 0;i <this.value1.length;i++){
                if(i == this.value1.length - 1){
                    detailsName = detailsName + this.value1[i];

                }else{
                    detailsName = detailsName + this.value1[i]+",";
                }
            }
            this.$axios.get(
                '/project/addProjectCommit',
                {
                    params:{
                        name:this.form.name,
                        fatherDepartId: this.form.fatherDepartId,
                        price: this.form.price,
                        details:detailsName,
                        status:this.status
                    }
                }
                
            ).then(res=>{
                console.log(res)
                if(res != undefined){
                    if(res.code == 1){
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                    }else if(res.code == 0){
                        this.$message.error('该项目名已经存在！不能重名');
                    }else{
                        this.$message.error('添加失败！');
                    }
                }
                
            })
        },
        lookInclude(row){
            this.dialogTableVisible=true
            this.$axios.get(
                '/project/lookInclude',
                {
                    params:{
                        id:row.projectId
                    }
                }
            ).then(res=>{
                console.log("项目包含的细项",res)
                if(res != undefined){
                    this.gridData = res.data
                }
                
            })
        },
        alterClick(row) {
            this.nowProject.projectId = row.projectId
            this.nowProject.projectName = row.projectName
            this.nowProject.projectPrice = row.projectPrice
            this.$axios.get(
                '/project/getDetailsName',
                {
                    params:{
                        id:this.nowProject.projectId
                    }
                }
            ).then(res=>{
                console.log(res)
                if(res != undefined){
                    this.nowProject.detailsName = res.data 
                }
                
            })
            this.dialogVisible = true
        },
        cancel(){
            this.dialogVisible = false;
            this.getAllProject();
        },
        sureCommit(){
            this.dialogVisible = false,
            this.$axios.get(
                '/project/alterInfo',
                {
                    params:{
                        projectId:this.nowProject.projectId,
                        projectName:this.nowProject.projectName,
                        projectPrice:this.nowProject.projectPrice,
                        detailsName:this.nowProject.detailsName
                    }
                }
            ).then(res=>{
                console.log("修改项目",res)
                if(res != undefined){
                    if(res.code == 2){
                        this.$message({
                            showClose: true,
                            message: '暂未修改',
                        });
                    }else if(res.code == 1){
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                    }else if(res.code == -1){
                        this.$message({
                            showClose: true,
                            message: '填写格式或者是信息有误',
                            type: 'error'
                        });
                    }else if(res.code == -2){
                        this.$message({
                            showClose: true,
                            message: '项目修改信息填写有误',
                            type: 'error'
                        })
                    }else{
                        alert("填写有误,请检查填写是否正确")
                    }
                }
            })
        },
        deleteRow(row){
            this.$axios.get(
                '/project/deleteRow',
                {
                    params:{
                        projectId:row.projectId
                    }
                }
            ).then(res=>{
                console.log("删除项目",res)
                if(res != undefined){
                    if(res.code == 1){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.getAllProject(),
                        this.getAllName()
                    }else if(res.code == -1){
                        this.$message.error(res.msg);
                    }else{
                        this.$message.error("删除失败");
                    }    
                }
                            
            })
        },
        open(row) {
            this.$confirm('此操作将删除该项目, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.deleteRow(row)
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        // 价格区间搜索
        borderPriceSearch(){
            this.isSearch = 2
            this.$axios.get(
                '/project/borderPriceSearch',
                {
                    params:{
                        minPrice : this.minPrice,
                        maxPrice : this.maxPrice,
                        pageCurr:this.page.currentPage,  
                        pageSize:this.page.pageSize,
                    }
                }
            ).then(res => {
                if(res != undefined){
                    console.log("价格区间搜索",res)
                    this.tableData = res.data.list
                    this.page.total = res.data.totalSize  
                }
                
            })
        },
        // 重置表单内容
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.value1 = []
        }
    }
}
</script>
<style scoped>
.boderPrice{
    margin-right: 25%;
}
.boderPrice input{
    width: 70px;
    color:gray
}
.boderPrice button{
    margin-left: 2px;
    border-radius: 30px;
    border: none;
    height: 25px;
    background-color:dodgerblue;
    color:white;
    float: right;
    width: 50px;

}
.boderPrice button:hover{
    cursor: pointer;
    background-color: rgb(125, 187, 249);
}
@import "../../static/css/btnStyle.css"
</style>